<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>后台模板</title>
    <link rel="stylesheet" type="text/css" href="plugins/jquery-easyui-1.5.5.5/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="plugins/jquery-easyui-1.5.5.5/themes/icon.css">
    <script type="text/javascript" src="plugins/jquery-easyui-1.5.5.5/jquery.min.js"></script>
    <script type="text/javascript" src="plugins/jquery-easyui-1.5.5.5/jquery.easyui.min.js"></script>
    <script type="text/javascript">
        $().ready(function() {
            var treeJson = [{"id":1,"text":"My Documents","children":[{"id":11,"text":"Photos","state":"closed","children":[{"id":111,"text":"Friend"},{"id":112,"text":"Wife"}]},{"id":12,"text":"Program Files","state":"closed","children":[{"id":121,"text":"Intel"},{"id":122,"text":"Java"}]},{"id":16,"text":"Actions","children":[{"text":"Add","iconCls":"icon-add"},{"text":"Remove","iconCls":"icon-remove"}]},{"id":13,"text":"index.html"}]},{"id":1,"text":"My Documents","children":[{"id":11,"text":"Photos","state":"closed","children":[{"id":111,"text":"Friend"},{"id":112,"text":"Wife"}]},{"id":12,"text":"Program Files","state":"closed","children":[{"id":121,"text":"Intel"},{"id":122,"text":"Java"}]},{"id":16,"text":"Actions","children":[{"text":"Add","iconCls":"icon-add"},{"text":"Remove","iconCls":"icon-remove"}]},{"id":13,"text":"index.html"}]}];
            for (var i=0; i<3; i++) {
                var item = "item" + i;
                $('#menuTreeAccordion').accordion('add', {
                    iconCls: 'icon-save',
                    title: '新标题',
                    content: '<div id="' + item + '"></div>',
                    selected: false
                });
                $('#' + item).tree({
                    data: treeJson,
					onClick: function (node) {
                        //判断是叶子节点且有URL属性
                        if (node.hasOwnProperty('children') == false) {
                            // tab的标题不是唯一的，不能通过名称某个tab是否已存在，不存在先创建，如果存在就选择
                            // easyui提过的API只有通过tab的标题或者下标来判断tab是否存在
                            $('#mainPageTab').tabs('add',{
                                title:'accordion',
                                // href:'accordion.html',
								content: '<div style="padding:10px;">accordion</div>',
                                closable:true
                            });
                        }  else {
                            // easyui tree当点击父节点时让直系子节点展开
                            $(this).tree('toggle', node.target);//单击文本切换展开/折叠节点的状态
                        }
                    }
                });
            }

            $('#menuTreeAccordion .tree-node').css('height','28px');
            $('#menuTreeAccordion .tree-title').css('font-size','18px');
            $('#menuTreeAccordion .tree-title').css('height','28px');
            $('#menuTreeAccordion .tree-title').css('line-height','28px');
            $('#menuTreeAccordion .tree-title').css('padding','0px');
            $('#menuTreeAccordion .tree-title').css('margin','0px');

            function setWindowSize() {
                var height = $(window).height()-16;
                $("#outerLayout").attr("style","width:100%;height:"+height+"px");
                $("#outerLayout").layout("resize", {
                    width:"100%",
                    height:height+"px"
                });
            };
            $(document).ready(setWindowSize);
            $(window).resize(setWindowSize);
        });
    </script>

</head>
<body>
<div id="outerLayout" class="easyui-layout">
    <div data-options="region:'north'" style="height:50px"></div>
    <div data-options="region:'west', split:true" title="菜单导航栏" style="width:250px;">
        <div id="menuTreeAccordion" class="easyui-accordion" data-options="fit:true,border:false,animate:false"></div>
    </div>
    <div data-options="region:'center'" title="  ">

    </div>
</div>
</body>
</html>
